<template>
	<view class="body"
	:style="{'height': `${sysheight}px`, 'width': `${syswidth}px`}">
		<!-- <video 
		:initial-time="initialTime" 
		:show-loading="true" 
		:controls="false" 
		:loop="true"
		:show-center-play-btn="false"
		:show-play-btn="false" 
		:enable-progress-gesture="false" 
		:style="{'height': `${sysheight}px`, 'width': `${syswidth}px`}"
		 @tap="clickVideo" 
		 @play="_play"
		 @timeupdate="timeupdate" 
		 @waiting="_waiting"
		 :id="`video_${videoData.vid}`"
		 :poster="videoData.poster"
		 :src="videoData.play"
		 :ref="`video_${videoData.vid}`"
		 ></video> -->
		 <!-- :show-loading="true"
		 :controls="false" 
		 :loop="true"
		 :show-center-play-btn="false"
		 :show-play-btn="false" 
		 :enable-progress-gesture="false" -->
		 <!-- @tap="clickVideo"
		 @play="_play"
		 @timeupdate="timeupdate" 
		 @waiting="_waiting" -->
		 
		 <!-- :enable-play-gesture="false"-->
		 <video
		 :initial-time="initialTime" 
		 :controls="false" 
		 :show-loading="false" 
		 :loop="true"
		 :autoplay="true"
		 :show-center-play-btn="false"
		 :enable-progress-gesture="false"
		 :show-fullscreen-btn="false"
		 
webkit-playsinline="true" 
x-webkit-airplay="allow" 
playsinline="" 
x5-video-player-type="h5-page" 
x5-video-orientation="portrait" 
x5-video-player-fullscreen="true"
		
		
		 :show-play-btn="false" 
		 @tap="clickVideo"
		 @play="_play"
		 @timeupdate="timeupdate"
		 @waiting="_waiting"
		 :style="{'height': `${sysheight}px`, 'width': `${syswidth}px`}"
		  :id="`video_${videoData.ID}`"
		  :src="videoData.Videourl"
		  :ref="`video_${videoData.ID}`"
		  :poster="videoData.Videoimg"
		  v-if="play"
		  :http-cache="true"
		  ></video>
		<cover-view class="progressBar" :style="{ width: barWidth }"></cover-view>
		<cover-image v-if="!isPlay" class="icon-play" src="@/static/icon/icon_play.png" @click="clickVideo" 
		:style="{'top': `${sysheight/2}px`}"></cover-image>
	</view>
</template>

<script>
	//const modal = weex.requireModule('modal')
	export default {
		props: {
			initialTime: {
				type: Number,
				default: 0
			},
			videoData: {
				type: Object,
				default: null
			},
			play:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				time: 0,
				duration: 0,
				isPlay: false,
				videoCtx: null,
				sysheight: 0,
				syswidth: 0
			}
		},
		mounted() {
			let sys = uni.getSystemInfoSync()
			this.sysheight = sys.windowHeight-60
			this.syswidth = sys.windowWidth
			this.$nextTick(() => {
				this.videoCtx = uni.createVideoContext(`video_${this.videoData.ID}`, this)
				this.videoCtx.play()
				//this.isPlay = true
			})
		},
		onUnload() {
			this.videoCtx.stop();
			uni.$off('videoCreated');
		},
		methods: {
			timeupdate(event) {
				this.$emit('timeupdate', {
					e: event,
					video: this.videoCtx
				})
				this.time = event.detail.currentTime
				this.duration = event.detail.duration
				
				
				if(!this.isPlay){
					
				}
			},
			clickVideo(e) {
				if(this.isPlay){
					this.videoCtx.pause()
					this.isPlay = !1
				}else{
					this.videoCtx.play()
					this.isPlay = !0
				}
			},
			_play(){
				// console.log('play')
				this.isPlay = true
			},
			_waiting(){
				//console.log('waiting')
			},
			stopPlay(){
				this.videoCtx.pause()
				this.isPlay = !1
			}
		},
		computed: {
			barWidth() {
				let width = this.time / this.duration * this.syswidth
				return `${width}px`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		position: relative;
	}

	.progressBar {
		border-radius: 2rpx;
		height: 4rpx;
		background-color: #FFFFFF;
		z-index: 999999;
		position: absolute;
		bottom: 5rpx;
		//#ifndef APP-PLUS-NVUE
		animation: flicker 4s linear infinite;
		animation-direction: alternate;
		//#endif
	}
	.icon-play{
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		left: 325rpx;
	}

	//#ifndef APP-PLUS-NVUE
	@keyframes flicker {
		0% {
			box-shadow: 0 0 0 #FFFFFF;
		}

		/** 暂停效果 */
		10% {
			box-shadow: 0 0 2rpx #FFFFFF;
		}

		50% {
			box-shadow: 0 0 10rpx #FFFFFF;
		}

		60% {
			box-shadow: 0 0 12rpx #FFFFFF;
		}

		90% {
			box-shadow: 0 0 18rpx #FFFFFF;
		}

		100% {
			box-shadow: 0 0 20rpx #FFFFFF;
		}

	}

	//#endif
</style>
